<script setup lang="ts">
import { ref } from "vue";
import type {
  UploadFile,
  UploadRequestHandler,
  UploadRequestOptions
} from "element-plus";
import {
  Delete,
  Download,
  Plus,
  ZoomIn,
  UploadFilled
} from "@element-plus/icons-vue";

/** 文件上传配置 */
const acceptTypes = ".xlsx";
/** 文件上传列表 */
const fileList = ref([]);
const dialogImageUrl = ref("");
const dialogVisible = ref(false);
const disabled = ref(false);

const handleRemove = (file: UploadFile) => {
  console.log(file);
  fileList.value = [];
};

const handlePictureCardPreview = (file: UploadFile) => {
  dialogImageUrl.value = file.url!;
  dialogVisible.value = true;
};

const handleDownload = (file: UploadFile) => {
  console.log("下载文件:", file);
};

const handleChange = (file: UploadFile) => {
  console.log("文件变化:", file);
};

const handleUpload: UploadRequestHandler = (options: UploadRequestOptions) => {
  console.log("开始上传:", options.file);
  const formData = new FormData();
  formData.append("file", options.file);

  // 这里可以添加实际的文件上传逻辑
  // 例如：调用上传API
  console.log("上传数据:", formData);

  return new Promise(resolve => {
    // 模拟上传成功
    setTimeout(() => {
      resolve({
        url: URL.createObjectURL(options.file),
        name: options.file.name
      });
    }, 1000);
  });
};

// 暴露方法给父组件
defineExpose({
  getFiles: () => fileList.value,
  clearFiles: () => {
    fileList.value = [];
  }
});
</script>

<template>
  <div class="upload-container">
    <el-form-item label="文件上传">
      <el-upload
        v-model:file-list="fileList"
        :auto-upload="true"
        :accept="acceptTypes"
        :limit="5"
        :on-change="handleChange"
        :http-request="handleUpload"
        :on-remove="handleRemove"
        drag
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <template #tip>
          <div class="el-upload__tip">
            支持 .xlsx 格式文件，单个文件不超过 10MB
          </div>
        </template>
      </el-upload>
    </el-form-item>
  </div>
</template>

<style lang="scss" scoped>
.upload-container {
  padding: 20px;
}
</style>
